<template>
	<view>
		<!--  头部金额总计-->
		<view class="user-recharge-wrapper sticky top-0" :style="{backgroundColor:systemTheme.bg ,'z-index': 20}">
			<view :style="{height:statusBarHeight}"></view>
			<view class="user-recharge-box pb-10">
				<view class="recharge-info">
				</view>
			</view>
			<!--      净资产-->
			<view class="recharge-user-money-total">
				<view style="display: flex;justify-content: center">
					<view style="display: flex;align-items: center">
						<text class="recharge-money-title font-16">净资产</text>
					</view>
				</view>
				<view class="recharge-money pl-10" style="font-size: 28px;display: flex;justify-content: center">¥
					{{ formatMoney(assetTotal.total) }}
				</view>
			</view>

			<!--      资产与负债-->
			<view style="display: flex;flex-direction: row;justify-content: space-between">
				<view class="recharge-user-money">
					<view style="display: flex;justify-content: center;align-items: center">
						<!--            <text class="iconfont icon-jingzichan" style="font-size: 18px;"></text>-->
						<text class="recharge-money-title">资产:</text>

						<view class="recharge-money">¥ {{ formatMoney(assetTotal.inTotal) }}</view>
					</view>
				</view>
				<view class="recharge-user-money">
					<view style="display: flex;justify-content: center;align-items: center">
						<!--            <text class="iconfont icon-fuzhaiqingkuang" style="font-size: 18px;"></text>-->
						<text class="recharge-money-title">负债:</text>

						<view class="recharge-money">¥ {{ formatMoney(assetTotal.outTotal) }}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 资产/负载统计 -->
		<view v-show="assetList.length > 0" class="flex flex-column px-20 p-10 pb-24 "
			style="background-color: #F7F7F7;">
			<view class="assetType-item" v-for="item in assetTypeList">
				<uni-collapse v-model="value">
					<uni-collapse-item title-border="none" :border="false">
						<template v-slot:title>
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view style="display: flex;align-items: center;padding: 10px;">
									<text class="text-16" style="font-weight: 700;">{{item.type_title}}</text>
								</view>
								<view>
									<text class="text-16" style="font-weight: 700;">{{formatMoney(item.num)}}</text>
								</view>
							</view>
						</template>
						<view class="content">
							<view class="content-item" v-for="itemDetail in item.itemList"
								@click="updateItem(itemDetail)">
								<view class="p-10"
									style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;align-items: center;">
										<text :class="'iconfont '+ itemDetail.icon "
											style="font-size: 30px;margin-right: 10px;"></text>
										<text class="text-16">{{itemDetail.title}}</text>
									</view>
									<view>
										<text class="text-16">{{formatMoney(itemDetail.num)}}</text>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>

		<view v-show="assetList.length ===0" class="empty flex-auto flex flex-column justify-center items-center"
			style="height: 200px;align-items: center;">
			<text class="iconfont icon-wushuju" style="font-size: 50px"></text>
			<text>暂无数据</text>
		</view>

		<AssetUpdate :visible="showPopup" ref="assetUpdateRef" :title-update="false" @close="closePopup" :obj="asset"
			@updateConfirm="updateConfirm"></AssetUpdate>

		<!-- 分类操作 -->
		<uni-popup ref="typeOperation" type="bottom" background-color="#fff">
			<view class="flex flex-column">
				<text class="text-center py-24" style="color: orangered; border-bottom: 1px solid #eee;"
					@click="handleDeleteType">删除</text>
				<text class="text-center py-24" @click="openPopup()">修改</text>
			</view>
		</uni-popup>
		<view class="add-fab" @click="goPage('asset/assetTypeList')">
			<uni-icons type="plusempty" color="#fff" size="24"></uni-icons>
		</view>
	</view>
</template>


<script>
	import AssetUpdate from "./AssetUpdate.vue";
	import {
		getAssetList,
		getAssetType,
		updateAsset,
		deleteAsset,
		getAssetTotal
	} from '@/api/api.js'
	import KDatePicker from "../../components/k-date-picker/KDatePicker.vue"
	import {
		useSystem
	} from "@/store/theme"
	import {
		fmtNum,
		formatMoney
	} from '@/common/format.js'
	import dayjs from 'dayjs'
	export default {
		name: "asset",
		components: {
			KDatePicker,
			AssetUpdate
		},
		data() {
			return {
				assetList: [],
				assetTypeList: [],
				value: ['0'],

				// 金额总计
				assetTotal: {},


				// 资产类型编辑组件
				showPopup: false,

				asset: {}
			}
		},
		computed: {
			statusBarHeight() {
				return (uni.getSystemInfoSync()).statusBarHeight + 'px'
			}
		},
		setup() {
			const systemTheme = useSystem()
			return {
				systemTheme
			}
		},
		async onShow() {
			await this.getData();
		},
		methods: {
			formatMoney(num) {
				return formatMoney(num)
			},
			openPopup() {
				this.$refs.typeOperation.close()
				this.showPopup = true
			},
			// 删除自定义类型
			async handleDeleteType() {
				const self = this
				uni.showModal({
					title: '提示',
					content: '是否要删除该资产',
					success: async function(res) {
						if (res.confirm) {
							await deleteAsset(self.asset.id)
							self.$refs.typeOperation.close()
							await self.getData()
						}
					}
				})
			},
			closePopup() {
				this.showPopup = false
			},
			async updateConfirm(e) {
				await updateAsset(e, true);
				this.showPopup = false
				this.getData()
			},
			updateItem(item) {
				this.asset = {
					type_id: item.type_id,
					title: item.title,
					icon: item.icon,
					id: item.id,
					remark: item.remark,
					num: item.num
				}
				this.$refs.typeOperation.open()
			},
			parse(dateStr) {
				return dayjs(dateStr).format('M月D日 HH:mm:ss')
			},
			fmtNum(num, size) {
				return fmtNum(num, size)
			},
			async getData() {
				// uni.showLoading({
				// 	title: "加载中"
				// })

				// 获取总计
				//查询资产总计
				this.assetTotal = await getAssetTotal()
				let assetList = await getAssetList();
				this.assetList = assetList;

				if (assetList !== null && assetList.length > 0) {
					let mapByType = {}

					assetList.map(item => {
						let mapByTypeElement = mapByType[item.parent_type_id];
						if (mapByTypeElement !== undefined) {
							mapByTypeElement.push(item);
						} else {
							let arr = [];
							arr.push(item);
							mapByType[item.parent_type_id] = arr;
						}
					})

					let typeArr = [];

					for (let key in mapByType) {
						const mapByTypeElement1 = mapByType[key];

						let typeAssetObj = {
							type_id: mapByTypeElement1[0].parent_type_id,
							icon: mapByTypeElement1[0].parent_icon,
							type: mapByTypeElement1[0].type,
							type_title: mapByTypeElement1[0].parent_title,
							itemList: mapByTypeElement1,
							num: mapByTypeElement1.reduce((accumulator, currentValue) => accumulator + currentValue
								.num, 0)


						}
						typeArr.push(typeAssetObj)
					}

					// 根据总金额排序
					if (typeArr != null && typeArr.length > 0) {
						typeArr.sort((a, b) => b.num - a.num)
					}

					this.assetTypeList = typeArr;
				}

				// setTimeout(function() {
				// 	uni.hideLoading()
				// }, 1000);
			},
			/* 跳转页面 */
			goPage(pageName) {
				uni.navigateTo({
					url: '/pages/' + pageName
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	.assetType-item {
		background-color: #fff;
		border-radius: 10px;
		// padding: 10px;
		margin-bottom: 10px;
		overflow: hidden;
	}

	.user-recharge-wrapper {
		background: #ffffff;
		//border-radius: 20rpx;
		padding: 30rpx;


		.user-recharge-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.recharge-info {
				.info-title {
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
				}

				.info-content {
					color: #666;
					font-size: 24rpx;
				}
			}

		}

		.recharge-user-money {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 26rpx;
			color: white;

			.recharge-money {
				font-weight: bold;
				font-size: 30rpx;
			}

			.recharge-money::first-letter {
				font-size: 22rpx;
			}
		}


		.recharge-user-money-total {
			display: flex;
			justify-content: space-between;
			// margin-top: 20rpx;
			font-size: 26rpx;
			color: white;
			flex-direction: column;
			margin-bottom: 12px;

			.recharge-money {
				font-weight: bold;
				font-size: 30rpx;
			}

			.recharge-money::first-letter {
				font-size: 22rpx;
			}
		}
	}

	.recharge-button {
		background: white;
		color: #333;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		border-radius: 50rpx;
		flex-shrink: 0;
		border: 1rpx solid #dadbde;
	}

	.recharge-money-title {
		margin-right: 10px;
	}

	.charts-box {
		width: 100%;
		height: 35%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
	}
	.add-fab {
		position: fixed;
		bottom: 20px;
		right: 20px;
		// transform: translateX(-50%);
		background-color: #4f84ff;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		box-shadow: 1px 7px 7px #cbcaca;
		text-align: center;
		line-height: 50px;
	}
</style>